<script setup>
import { reactive, onMounted, onUnmounted, nextTick } from 'vue';
import { unitApi } from '@T2/service/api.ts'
import { flyList, flyListKey } from '../constant.ts';
import UnitDetail from '../components/unitDetail.vue';

const { BIMRat } = defineProps({
  BIMRat: {
    type: Object,
    required: true,
  },
});

const Resd = reactive({
  current: 0,
  pause: true,
  
  unitList: [],
  curUnit: {},
  tipsUnitDOM: null,
});

const emits = defineEmits(['closeFlys']);

let walkthrough = null;
onMounted(() => {
  getUnitList();
  createWalkthrough();
  initFlysModel();
});
function getUnitList() {
  unitApi({
    method: 'get',
    params: {
      ordering: 'code',
    },
  }).then(res => {
    Resd.unitList = res?.results || [];
  })
}
function createWalkthrough() {
  let walkthroughConfig = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();
  walkthroughConfig.viewer = BIMRat.viewer3D;
  walkthrough = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(walkthroughConfig);
  walkthrough.setKeyFrames(flyList);
  walkthrough.setWalkthroughTime({totalTime: 100});
  walkthrough.setKeyFrameCallback(keyFrameCallback);
  walkthrough.stopCallback(wtStopCallback);
}
function initFlysModel() {
  Resd.pause = false;
  Resd.current = 0;
  let flyHides = [];
  for (let key in flyListKey) {
    flyListKey[key].forEach(item => {
      if (item.hides?.length) {
        flyHides.push(...item.hides);
      }
    });
  }
  BIMRat.model3D.hideComponentsById(flyHides);
  walkthrough.play();
}
function wtStopCallback() {
  Resd.pause = true;
}
function keyFrameCallback(idx) {
  Resd.current = idx;
  
  const arrs = flyListKey[idx] || [];
  BIMRat.drawableContainer.clear();
  const normals = arrs.filter(i => i.type === 'normal');
  if (normals.length) {
    arrs.forEach(i => {
      let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
      let content = document.createElement('div');
      content.innerHTML = `<div class="leadTips">
        <div class="tip-box unit-icon">
          <div class="name">${ i.name }</div>
          <img src="${require('../assets/device/unitPosition.png')}" width="43" height="52"  />
        </div>
      </div>`;
      config.content = content;
      config.viewer = BIMRat.viewer3D;
      config.worldPosition = i.position;
      let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
      BIMRat.drawableContainer.addItem(customItem);
    });
    return;
  }
  const [ tipsDevices ] = arrs.filter(i => ['ltr-device', 'ttb-device'].includes(i.type)) || [];
  if (tipsDevices) {
    let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
    let content = document.createElement('div');
    content.innerHTML = `<div class="leadTips" id="tipsFlysID${ tipsDevices.id }">
      <div class="tip-box">
        <img src="${require('../assets/flys/position.png')}" width="40" height="40"  />
      </div>
    </div>`;
    config.content = content;
    config.viewer = BIMRat.viewer3D;
    config.worldPosition = tipsDevices.position;
    let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
    BIMRat.drawableContainer.addItem(customItem);
    nextTick(() => {
      let unit = Resd.unitList.find(j => j.code === tipsDevices.code) || {};
      Resd.curUnit = unit;
      Resd.tipsUnitDOM = document.getElementById(`tipsFlysID${ tipsDevices.id }`);
    });
    return;
  }
  
}

function playClick() {
  if (Resd.pause) {
    Resd.pause = false;
    if (Resd.current < flyList.length - 1) {
      walkthrough.play(Resd.current);
    } else {
      walkthrough.play(0);
    }
  } else {
    walkthrough.stop();
  }
}

function playTargetVideo(value) {
  if (!Resd.pause) {
    walkthrough.stop();
    /* 会先执行wtStopCallback()，然后才会继续往下执行*/
  }
  Resd.pause = false;
  walkthrough.play(value);
}

function handleCloseFlys() {
  emits('closeFlys');
}

onUnmounted(() => {
  walkthrough.stop();
});
</script>

<template>
  <transition>
    <div class="flysbox">
      <div class="slider">
        <el-slider
          v-model="Resd.current"
          @change="playTargetVideo"
          :min="0"
          :max="flyList.length - 1"
          :step="1"
        />
      </div>
      <div class="videoAction">
        <img
          :src="Resd.pause ? require('../assets/flys/play.png') : require('../assets/flys/pause.png')"
          @click="playClick()"
        />
        <img :src="require('../assets/flys/back.png')" @click="playTargetVideo(0)" />
        <img :src="require('../assets/flys/close.png')" @click="handleCloseFlys()" />
      </div>
    </div>
  </transition>
  
  <teleport :to="Resd.tipsUnitDOM" :disabled="false" v-if="Resd.curUnit?.id && Resd.tipsUnitDOM">
    <UnitDetail :unit="Resd.curUnit" />
  </teleport>
  
</template>

<style lang="scss" scoped>
.flysbox {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient( 180deg, rgba(0,49,56,0.7) 0%, rgba(0,23,27,0.6) 15%, rgba(0,0,0,0.4) 51%, rgba(0,21,24,0.25) 90%, rgba(0,49,56,0.6) 100%);
  width: 50vw;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider {
  flex: 1;
  margin-right: 10px;
}
.videoAction {
  display: flex;
  align-items: center;
  img {
    width: 22px;
    height: 22px;
    cursor: pointer;
    margin: 0 10px;
  }
}
</style>
<style scoped>
:deep(.el-slider__runway) {
  background: linear-gradient( 180deg, #003B44 0%, rgba(0,50,57,0.4) 100%);
  border-radius: 18px;
  border: 1px solid rgba(16,255,249,0.1);
}
:deep(.el-slider__bar) {
  background: #10FFF9;
  border-radius: 18px;
  border: 1px solid rgba(16,255,249,0.1);
  opacity: 0.3;
}
:deep(.el-slider__button) {
  background: #10FFF9;
  box-shadow: 0px 0px 8px 1px rgba(16,255,249,0.7), 0px 0px 3px 0px #10FFF9;
  border: 1px solid rgba(255,255,255,0.5);
  height: 14px;
  width: 14px;
}
</style>